<template>
	<view class="content">
		<view class="wrap" :style="{'color':color,'backgroundColor': background}">
			<!-- 'backgroundColor': background,'height':height+'rpx', -->
			<view class="home-header" :class="{'fixed':fixed}"><!-- :style="{'backgroundColor': background,}" -->
				<view class="home-top">
					<view class="home-top__city">
						<text class="home-top__city__cityname" v-if="district">{{district}}</text>
					</view>
					<view class="search-label home-top__search" @tap="handleClick">
						<text class="iconfont iconsearch icon-sousuo_ search-label__icon"></text>
						<text class="s-input" type="text" placeholder="搜索商品" placeholder-style="color:#999">
							{{placeholder}}</text>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view style="width: 150rpx;"></view>
					<!-- #endif -->
				</view>

				<view class="navTabBox" :class="{isFixed:fixed}" v-if="tabs.length > 0">
					<view class="longTab">
						<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
							:scroll-left="tabLeft" show-scrollbar="true">
							<view class="longItem" :style='"width:"+isWidth+"px"' :data-index="index"
								:class="index===current?'click':''" v-for="(item,index) in tabs" :key="index"
								:id="'id'+index" @click="longClick(item,index)">
								{{item.name}}
							</view>
							<view class="underlineBox"
								:style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
								<view class="underline"></view>
							</view>
						</scroll-view>
					</view>
				</view>


			</view>
		</view>

	</view>

</template>

<script>
	export default {
		name: 'swpHomeHeader',
		props: {
			//名称
			district: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '搜索商品'
			},
			//背景色
			background: {
				type: String,
				default: '#F8F8F8'
			},
			//高度
			height: {
				type: Number,
				default: 240
			},
			//区域文字颜色
			color: {
				type: String,
				default: '#222'
			},
			fixed: {
				type: Boolean,
				default: false
			},
			tabs: {
				type: Array,
				default: () => []
			},
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				activeTrans: 0,
				isWidth: 0, //每个导航栏占位
				isLeft: 0, //导航栏下划线位置
				tabLeft: 0
			}
		},
		created() {
			let that = this
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 5
				}
			})
		},
		methods: {
			handleClick() {
				this.$emit('click', {})
			},
			// 导航栏点击
			longClick(item, index) {
				if (this.tabs.length > 5) {
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				// this.current = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				this.$emit('bindSortId', {
					'cate_id': item.id,
					'current': index
				})
			},
		},
		watch: {
			fixed() {
				if (this.fixed) {
					uni.setNavigationBarColor({
						frontColor: "#000000",
						backgroundColor: '#fff'
					})
				} else {
					uni.setNavigationBarColor({
						frontColor: "#ffffff",
						backgroundColor: '#fff'
					})
				}

			},
			current() {
				if (this.tabs.length > 5) {
					this.tabLeft = (this.current - 2) * this.isWidth //设置下划线位置
				}
				this.isLeft = this.current * this.isWidth //设置下划线位置
				this.$emit('bindSortId', {
					'cate_id': this.tabs[this.current]['id'],
					'current': this.current
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 24rpx;
		margin-top: 40rpx;
	}

	.wrap {
		position: relative;
		background-size: 100% auto;

	}

	.home-header {
		padding-top: var(--status-bar-height);
		// width: 100%;
		max-width: 828rpx;
		margin: 0 auto;
		z-index: 10;

		.home-top {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 10rpx;

			.home-top__city {
				font-size: 34rpx;
				margin: 0 26rpx 0 46rpx;

				// color: #222;
				.home-top_icon {
					color: #3c3f44;
					//font-size: 8rpx !important;
					vertical-align: middle;
					padding-left: 10rpx;
				}
			}

			.home-top__search {
				margin-right: 50rpx;
				flex: 1;
				justify-content: left !important;
				align-items: center;
				padding-left: 24rpx;
				padding-right: 24rpx;
				height: 66rpx;
				line-height: 66rpx;
				color: #9c9ca5 !important;
				font-size: 26rpx;
				// background-image: -webkit-linear-gradient(left,#fff3e7,#ffe9f7 51%,#f0f1fe) !important;
				// background-image: linear-gradient(90deg,#fff3e7,#ffe9f7 51%,#f0f1fe) !important;
				background-color: #FFFFFF;
				// border: 1px solid rgba(0, 0, 0, .05) !important;
				border-radius: 110rpx 110rpx 110rpx 22rpx !important;

				.search-label__icon {
					margin-right: 18rpx;
					font-size: 32rpx;
					color: #3c3f44;
				}

				.s-input {
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}


	/* Tab */
	.tabs {
		display: flex;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		width: 100%;
		overflow: auto;
		margin-top: 10rpx;

		.navs {
			display: flex;
			// width: 100%;

			.f-thin {
				position: relative;
			}

			/* .f-thin:before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				transform-origin: left top;
				transform: scale(1);
				box-sizing: border-box;
			} */

			.nav {
				position: relative;
				height: 84upx;
				line-height: 84upx;
				text-align: center;
				// background: #fff;
				color: #fff;
				font-size: 28upx;
				// width: 25%;
				// width: 33.33%;
			}

			.on {
				color: #fff;
				// font-weight: 700;
				// font-size: 32rpx;
			}

			.underlineBox {
				position: absolute;
				top: 40px;
				z-index: 99;
				height: 3px;
				width: 20%;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: .5s;

				.underline {
					width: 33rpx;
					height: 4rpx;
					background-color: white;
				}
			}
		}

		.fixedNav {
			position: fixed;
			// width: 100%;
			// top: 0;
			// left: 0;
			// z-index: 88;
		}


	}

	.fixed {
		position: fixed;
		width: 100%;
		background-color: #fff;
		transition: .2s;
		color: #222;

		.nav {
			color: #333 !important;

		}

		.on {
			color: #333 !important;
		}

		.underline {
			background-color: black;
		}

	}



	.navTabBox {
		width: 100%;
		color: rgba(255, 255, 255, 1);
		// padding-bottom: 20rpx;
		padding-top: 20rpx;

		&.isFixed {
			z-index: 45;
			// position: fixed;
			left: 0;
			width: 100%;
			/* #ifdef H5 */
			padding-top: 20rpx;
			top: 0;
			/* #endif */
		}

		.longTab {
			width: 100%;

			.longItem {
				height: 50rpx;
				display: inline-block;
				line-height: 50rpx;
				text-align: center;
				font-size: 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				&.click {
					font-weight: bold;
				}
			}

			.underlineBox {
				height: 3px;
				width: 20%;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: .5s;

				.underline {
					width: 33rpx;
					height: 4rpx;
					background-color: white;
				}
			}
		}
	}

	.isFixed {
		transition: .2s;
		background-color: #fff;

		.longItem {
			color: #333 !important;
		}

		.click {
			color: #333 !important;
		}

		.underline {
			background-color: #333 !important;
		}
	}


	.custom-shape-divider-bottom-1658030477 {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		line-height: 0;
		z-index: 99;

		svg {
			position: relative;
			display: block;
			width: calc(100% + 1.3px);
			height: 300rpx;
		}

		//.shape-fill {
		//    fill: #E03997;
		//}
	}

	.shadow_bg {
		position: relative;
		// z-index: 2;
		margin-top: -54rpx;
		height: 54rpx;
		background: linear-gradient(180deg, hsla(0, 0%, 94.1%, 0), #F8F8F8);
	}
</style>